<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!--
            1.定义一个v-big指令，作用与v-text类似，并且会把绑定的数值放大10倍
            2.定义一个v-fbind指令，和v-bind指令功能类似，并且会把绑定的input元素默认获取焦点
        -->
        <h2>当前的n值是: <span v-text="n"></span></h2>
        <h2>放大10倍的n值是: <span v-big="n"></span></h2>
        <h2>放大20倍的n值是: <span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input v-fbind:value="n" type="text">
    </div>
 
    <script>
        Vue.config.productionTip = false
        
        //定义全局自定义指令，所有vue实例都可用
        // Vue.directive('fbind',{
        //     bind(element, binding) {
        //         element.value = binding.value
        //     },
        //     inserted(element, binding) {
        //         element.focus()
        //     },
        //     update(element, binding) {
        //         element.value = binding.value
        //     }
        // }) 

        let vm = new Vue({
            el: "#root",
            data: {
                n: 1,
            },
            //定义局部指令，只能在这个vue实例管理的模板中用
            directives:{
                //定义v-big指令，简便写法
                //big函数被调用的时机：1.指令与元素绑定成功时（初始化）2.指令所在模板被重新解析时
                big(element, binding) {
                    //element是v-big指令绑定的真实dom
                    //binding是v-big指令绑定的内容（v-big后面表达式），binding.value就是表达式的值
                    console.log(element)
                    console.log(binding)
                    //操作dom元素
                    element.innerText = 10 * binding.value

                    //注意此处的this是window，所有指令相关函数的this都是window，无论用不用箭头函数
                    console.log(this)
                },
                //定义v-fbind命令，简便写法
                // fbind(element, binding) {
                //     element.value = binding.value
                //     //这么写不能让input获取焦点，因为此时还未渲染模板
                //     element.focus()
                // }
                //定义v-fbind命令，对象写法
                fbind: {
                    bind(element, binding) {
                        console.log('bind')
                        //指令与元素绑定成功时调用
                        element.value = binding.value
                        //这么写不能让input获取焦点，因为此时还未渲染模板
                        // element.focus()
                    },
                    inserted(element, binding) {
                        //指令所在元素被插入页面时调用
                        console.log('inserted')
                        //获取焦点要写在这里
                        element.focus()
                    },
                    update(element, binding) {
                        //指令所在模板被重新解析时调用
                        console.log('update')
                        element.value = binding.value
                    }
                },
                //自定义指令有多个单词时，vue推荐用-连接，此时函数名要加引号
                'big-number'(element, binding){
                    element.innerText = 20 * binding.value
                }
            }
        })

    </script>
</body>
</html>